<template>
  <div class="join-addEdit">
    <el-dialog :append-to-body="true" :title="title" v-model="show" @close="cancelFun" destroy-on-close>
      <el-form :model="form" ref="formRef" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="仓库名称:" prop="name">
          <el-input type="text" placeholder="请输入内容" size="large" v-model="form.name" maxlength="50" show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="街道:" prop="streent">
          <el-input type="text" placeholder="请输入内容" size="large" v-model="form.streent" maxlength="50" show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="电话:" prop="tel">
          <el-input type="text" placeholder="请输入内容" size="large" v-model="form.tel" maxlength="50" show-word-limit>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFun" size="large">取消</el-button>
          <el-button type="primary" @click="confirmFun" size="large">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { getCurrentInstance, computed, ref, watch, defineEmits, reactive } from 'vue'
import { addCangku, editCangku } from '@api/cangku'
import { getAllSheng, getAllShi, getAllqu } from '@api/common'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()

const props = defineProps({
  status: {
    type: String,
    default: null
  },
  show: {
    type: Boolean,
    default: null
  },
  addEditData: {
    type: Object,
    default: {
      id: '',
      name: ''
    }
  }
})

// const shengshiquA = ['110000', '110100', '110101']
const formRef = ref()

const form = ref({
  id: '',
  city: '',
  debang: '',
  jingdong: ''
})

const rules = reactive({
  city: [{ required: true, message: '名称不能为空!', trigger: 'blur' }],
  debang: [{ required: true, message: '街道不能为空!', trigger: 'blur' }],
  jingdong: [{ required: true, message: '收件人不能为空!', trigger: 'blur' }],
  tel: [{ required: true, message: '电话不能为空!', trigger: 'blur' }],
  xiangxidizhi: [{ required: true, message: '详细地址不能为空!', trigger: 'blur' }],
  shengshiqu: [
    {
      required: true,
      validator: (rule, value, callback) => {
        value = form.value.shengshiqu
        if (!value.length) {
          callback(new Error('省市区不能为空!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

const emit = defineEmits(['hide-addEdit'])

const title = computed(() => {
  return props.status == 'add' ? '添加客服' : '编辑客服'
})

function confirmFun() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let res = ''
      let { name, consignee, id, streent, tel, shengshiqu, xiangxidizhi } = form.value
      let nodes = proxy.$refs['shengshiqu'].getCheckedNodes()

      if (props.status == 'add') {
        res = await addCangku({
          name,
          consignee,
          streent,
          tel,
          province: nodes[0].pathLabels[0],
          city: nodes[0].pathLabels[1],
          county: nodes[0].pathLabels[2],
          addresscode: shengshiqu.join(','),
          xiangxidizhi
        })
      } else if (props.status == 'edit') {
        res = await editCangku({
          id,
          name,
          consignee,
          streent,
          tel,
          province: nodes[0].pathLabels[0],
          city: nodes[0].pathLabels[1],
          county: nodes[0].pathLabels[2],
          addresscode: shengshiqu.join(','),
          xiangxidizhi
        })
      }

      if (res.code == 200) {
        ElMessage({
          message: '操作成功!',
          type: 'success'
        })
        emit('hide-addEdit', props.status)
      }
    }
  })
}

function cancelFun() {
  emit('hide-addEdit', 'cancel')
}

// getAllSheng, getAllShi, getAllqu
const shengshiquProps = {
  lazy: true,
  lazyLoad(node, resolve) {
    const { level, data } = node
    if (level == '0') {
      getAllSheng().then((res) => {
        let result = res.data.map((v) => {
          return {
            label: v.province,
            value: v.provinceID,
            leaf: false
          }
        })
        resolve(result)
      })
    } else if (level == '1') {
      getAllShi({ provinceID: data.value }).then((res) => {
        let result = res.data.map((v) => {
          return {
            label: v.city,
            value: v.cityid,
            leaf: false
          }
        })
        resolve(result)
      })
    } else if (level == '2') {
      getAllqu({ cityid: data.value }).then((res) => {
        let result = res.data.map((v) => {
          return {
            label: v.area,
            value: v.areaid,
            leaf: true
          }
        })
        resolve(result)
      })
    } else {
      resolve()
    }
  }
}
// 省市区
const handleChange = (value) => {
  // form.value.shengshiqu = value ? [CodeToText[value[0]], CodeToText[value[1]], CodeToText[value[2]]] : []
}

watch(
  () => props.addEditData,
  (newValue, oldValue) => {
    console.log(newValue.shengshiqu)
    form.value.id = newValue.id
    form.value.name = newValue.name
    form.value.consignee = newValue.consignee
    form.value.streent = newValue.streent
    form.value.tel = newValue.tel
    form.value.shengshiqu = newValue.shengshiqu
    form.value.xiangxidizhi = newValue.xiangxidizhi
  },
  { deep: true }
)
</script>
<style lang="scss" scoped>
.news-addEdit {}
</style>
